<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/yoyoga.css" media="all"/>
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
    <script src="/layui/layui.js"></script>
</head>
<body>

<div class="main-content-container" id="trainerInfo">

    <img src="/image/portrait.png" width="150px">
    <p th:text="${trainerInfo.tName}"></p>
    <div class="trainer-detail-intro" th:text="${trainerInfo.tIntroduction}"></div>
    <div class="trainer-detail-intro" id="test">课时费：¥ <span th:text="${trainerInfo.tValue}"></span></div>

    <div class="layui-collapse colla-default">
        <div class="layui-colla-item" id="myGymList">
            <h2 class="layui-colla-title">签约场馆</h2>
            <div class="layui-colla-content layui-show" id="trainersOfGym">
            </div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">用户评价</h2>
            <div class="layui-colla-content layui-show">呵呵呵呵呵呵</div>
        </div>
    </div>

    <div id="contractState" style="font-size: x-large; color: red" ></div>
    <button class="layui-btn layui-btn-radius" onclick="orderClass()" id="orderClassBtn">预约课程</button>
    <br><br><br><br><br><br><br>

</div>



<!--折叠面板-->
<script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
</script>

<!-- head -->
<script>
    layui.use('element', function() {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>

<script th:inline="javascript">

    var gId = [[${gId}]];       //从场馆页面进入教练页面时由此值
    var userType = [[${session.userType}]];
    var tId = [[${trainerInfo.tId}]];
    var gIdRadio = $("input[name='gym']:checked").val();        //如果从全部教练页进入，则需要选择场馆。

    //todo:单选框选中取不了值的问题

    //预约课程
    function orderClass() {
        //判断gId是否为null
        if(gId==null){
            alert(gIdRadio);
            if(gIdRadio==null){
                alert("请选择上课场馆");
            }else {
                window.location.href='/contract/toComfirm?tId='+tId+'&gId='+ gIdRadio;
            }
        }else{
            window.location.href='/contract/toComfirm?tId='+tId+'&gId='+gId;
        }
    }


    //查询该教练入驻的场馆
    $(function () {
        //如果已经有场馆信息了，就不用再查场馆
        if(gId!=null){
            return;
        }
        var tId = [[${trainerInfo.tId}]];
        var trainers = "";
        $.ajax({
            url:"/trainer/selectGymBytId?tId="+tId,
            dataType:"json",
            success:function (data) {
                for(var i=0;i<data.length;i++){
                    trainers+= '<div class="gym-detail-trainer-container">'
                        + '<div class="gym-detail-trainer-single">'
                        + '<img src="/image/portrait.png" class="gym-detail-trainer-img"/>'
                        + '<label><input type="radio" name="gym" value="'+data[i].gId+'">'+data[i].gName+'</label>'
                        + '</div>'
                        + '</div>'
                }
                $("#trainersOfGym").html(trainers);
            }
        })
    })



    //设置教练签约的场馆的可见性：如果从场馆页进入，不可见
    //设置预约按钮的可见性：如果当前用户类型为教练，则预约按钮不可见
    $(function () {
        if(userType=='1'){
            $("#orderClassBtn").hide();
        }
        if(gId!=null){
            $("#myGymList").hide();
        }else{
            $("#myGymList").show();
            return;
        }
        //查询该学生是否已经和该教练在该场馆有进行中的合约
        $.ajax({
            //todo:设置合约不能重复发起
            url:"/contract/ongoingContract",
            data:{
                "gId":gId,
                "tId":tId
            },
            success:function (data) {
                if(data!=null){
                    switch (data.cState) {
                        case 0:
                            $("#contractState").html("您已发起预约请求，正在等待教练处理");
                            break;
                        case 1:
                            $("#contractState").html("您有一份与该教练在此场馆的合约正在生效中");
                            break;
                    }
                    $("#orderClassBtn").hide();
                }
            }

        })
    })
</script>



</body>
</html>
